<script setup lang="ts">
import { ref, reactive, defineEmits, toRaw } from 'vue'
import Motion from "./utils/motion";
import { $t, transformI18n } from "/@/plugins/i18n";
import { useI18n } from "vue-i18n";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { refisterRules } from "./utils/rule";
import { setTenantId } from '/@/utils/auth'

import { registrationApi } from '/@/api/system/auth'

const { t } = useI18n();
const emits = defineEmits(['to-login'])

const loading = ref(false)
const ruleForm = reactive({
  phoneNumber: "17666475088",
  password: "123456"
});

const onRegister = () => {
  loading.value = true;
  registrationApi(toRaw(ruleForm))
    .then(res => {
      if (res.succeeded) {
        setTenantId(res.data.id)
        emits('to-login')
      }
    })
    .finally(() => {
      loading.value = false
    })

}
</script>

<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="refisterRules" size="large">
    <Motion :delay="100">
      <el-form-item :rules="[
        {
          required: true,
          message: transformI18n($t('login.phoneNumberReg')),
          trigger: 'blur'
        }
      ]" prop="phoneNumber">
        <el-input clearable v-model="ruleForm.phoneNumber" :placeholder="t('login.phoneNumber')"
          :prefix-icon="useRenderIcon('user')" />
      </el-form-item>
    </Motion>

    <Motion :delay="150">
      <el-form-item prop="password">
        <el-input clearable show-password v-model="ruleForm.password" :placeholder="t('login.password')"
          :prefix-icon="useRenderIcon('lock')" />
      </el-form-item>
    </Motion>

    <Motion :delay="250" style="display: flex;justify-content: space-between;">
      <el-link></el-link>
      <el-link @click="emits('to-login')">去登录</el-link>
    </Motion>

    <Motion :delay="250">
      <el-button class="w-full mt-4" size="default" type="primary" :loading="loading" @click="onRegister()">
        注册
      </el-button>
    </Motion>
  </el-form>
</template>